<template>
  <div style="position: relative; padding: 20px;overflow: auto">
    <div style="display: flex; flex-direction: column; row-gap: 20px;">
      <div v-for="(speakList, index) of allSpeakList" :key="speakList" style="position: relative" @click="oneEdit(index)">
        <div style="background-color: pink; border: 1px solid red; border-radius: 20px; padding: 20px; display: flex; justify-content: center">
          <div>
            <span v-for="speak of speakList" :key="speak" style="font-size: 50px; margin: 0 2px" :style="{textDecoration: speak.has ? 'underline' : 'none', textUnderlineOffset: '15px'}">{{speak.content}}</span>
          </div>
        </div>
        <div class="remove" v-if="isEdit" style="position: absolute; top: 10px; right: 10px; font-size: 50px" @click.stop="oneRemove(index)">
          <i class="el-icon-error"></i>
        </div>
      </div>
    </div>

    <el-dialog title="创建拼读" :visible.sync="speakCreate.show">
      <div style="display: flex; flex-direction: column; row-gap: 20px">
        <div v-for="(speak, index) of speakList" :key="speak" style="display: flex; align-items: center; column-gap: 20px;">
          <el-input v-model="speak.content" style="flex: 2"></el-input>
          <el-checkbox v-model="speak.has" style="flex: 1" size="large" label="有下划线"></el-checkbox>
          <div>
            <el-button type="primary" @click="add">添加</el-button>
            <el-button type="danger" @click="remove(index)">删除</el-button>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button type="success" @click="createEnter">确定</el-button>
        <el-button @click="cancelCreate">取消</el-button>
      </template>
    </el-dialog>

    <el-dialog title="编辑拼读" :visible.sync="speakEdit.show">
      <div style="display: flex; flex-direction: column; row-gap: 20px">
        <div v-for="(speak, index) of speakList" :key="speak" style="display: flex; align-items: center; column-gap: 20px;">
          <el-input v-model="speak.content" style="flex: 2"></el-input>
          <el-checkbox v-model="speak.has" style="flex: 1" size="large" label="有下划线"></el-checkbox>
          <div>
            <el-button type="primary" @click="add">添加</el-button>
            <el-button type="danger" @click="remove(index)">删除</el-button>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button type="success" @click="editEnter">确定</el-button>
        <el-button @click="cancelEdit">取消</el-button>
      </template>
    </el-dialog>
    <div style="position: fixed; right: 20px; top: 20px">
      <el-button @click="edit()">{{isEdit ? '取消编辑' : '编辑'}}</el-button>
      <el-button @click="create()">添加</el-button>
    </div>
  </div>
</template>

<script>
import { selectSpeak, updateSpeak} from "@/api/controller"
export default {
  name: 'ViewSpeak',
  async mounted() {
    await this.getAllSpeakList()
  },
  methods: {
    async cancelEdit() {
      this.speakEdit.show = false
      await this.getAllSpeakList()
      this.speakEdit.show = false
    },
    async editEnter() {
      await updateSpeak(this.allSpeakList)
      await this.getAllSpeakList()
      this.speakEdit.show = false
    },
    async oneRemove(index) {
      try {
        await this.$confirm('此操作将永久删除该拼读, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.allSpeakList.splice(index, 1)
        await updateSpeak(this.allSpeakList)
        await this.getAllSpeakList()
        this.$message({
          type: 'success',
          message: `拼读删除成功!`
        });
      } catch(error) {
        console.log(error)
      }
    },
    oneEdit(index) {
      if (!this.isEdit) {
        return
      }
      this.speakList = this.allSpeakList[index]
      this.speakEdit.show = true
    },
    async createEnter() {
      let tempAllSpeakList = [this.speakList, ...this.allSpeakList]
      await updateSpeak(tempAllSpeakList)
      await this.getAllSpeakList()
      this.speakCreate.show = false
    },
    async getAllSpeakList() {
      let result = await selectSpeak()
      this.allSpeakList = JSON.parse(result.data[0].list)
    },
    cancelCreate() {
      this.speakCreate.show = false
    },
    remove(index) {
      if (this.speakList.length === 1) {
        return
      }
      this.speakList.splice(index, 1)
    },
    add() {
      this.speakList.push({content: '', has: false})
    },
    edit() {
      this.isEdit = !this.isEdit
    },
    create() {
      this.speakList = [{content: '', has: false}]
      this.speakCreate.show = true
    }
  },
  data() {
    return {
      allSpeakList: [],
      speakList: [],
      speakCreate: {
        show: false
      },
      speakEdit: {
        show: false
      },
      isEdit: false
    }
  }
}
</script>

<style scoped>
.remove:hover {
  cursor: pointer;
  color: red;
}
</style>